<template>
  <div class="feedback-content">
    <el-card v-for="(item, i) in recordList" :key="i" class="box-card">
      <div>
        <span>{{ item.title }}</span>
      </div>
      <div>
        <span v-html="item.feedbackConnect" />
      </div>
      <div class="bottom-infos">
        <span>提交人：{{ item.studentName }}</span>
        <span>团队名称：{{ item.teamName }}/{{ item.entryType === 1 ? '团队' : '个人' }}</span>
        <span>提交时间：{{ item.feedbackTime }}</span>
      </div>
    </el-card>
    <el-pagination
      v-if="recordList && recordList.length > 0"
      style="margin-top: 20px;"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-empty v-else description="暂无反馈" />
  </div>
</template>
<script>
import { updateNewsStudyTypeSort } from '@/api/content-manage/researchResult.js'
import { updateMessageTypeSort } from '@/api/inner-msg/index.js'
import { getFeedBackPageByProjectId } from './../api'
import FormGroup from '@/views/components/FormGroup'
export default {
  name: 'DragSrot',
  components: { FormGroup },
  props: ['id'],
  data() {
    return {
      dialogVisible: false,
      tableList: [],
      auditRadio: '',
      recordList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  mounted() {
    this.getFeedback()
  },
  beforeDestroy() {
    this.$dragging.$off('dragged')
  },
  methods: {
    handleClose() {
      this.dialogVisible = false
      this.tableList = []
      this.$dragging.$off('dragged')
    },
    open() {
      this.dialogVisible = true
    },
    async getFeedback() {
      const { code, data } = await getFeedBackPageByProjectId({
        'pageNo': this.currentPage,
        'pageSize': this.pageSize,
        'projectId': this.id
      })
      if (code === 0) {
        this.recordList = data.list
        this.total = data.total
      } else {
        this.total = 0
        this.recordList = []
      }
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      this.getFeedback()
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    async handleConfirm() {
      const ids = this.tableList.map(v => v.id)
      const { code, msg } = await updateMessageTypeSort({
        ids
      })
      if (code !== 0) {
        this.$message.error(msg)
        return
      }
      this.handleClose()
      this.$emit('success')
    }
  }
}
</script>

<style lang="scss" scoped>
.feedback-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-height: 300px;
}
    .box-card {
        display: flex;
        flex-direction: column;
        font-size: 16px;
        width: 60%;
        margin-bottom: 10px;

        .bottom-infos {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            font-size: 14px;
            color: #666;
        }
    }
</style>
